<template>
  <div>
    <div class="mask"></div>
    <van-sticky>
      <van-tabs
        v-model="activeName"
        title-active-color="#2eb97c"
        @click="onClick"
        :style="{ zIndex: zIndex }"
      >
        <van-tab name="label">
          <template #title>区域 <van-icon name="arrow-down" /> </template>
        </van-tab>
        <van-tab name="rentType">
          <template #title>方式 <van-icon name="arrow-down" /> </template>
        </van-tab>
        <van-tab name="price">
          <template #title>租金 <van-icon name="arrow-down" /> </template>
        </van-tab>
        <van-tab name="filter">
          <template #title>筛选 <van-icon name="arrow-down" /> </template>
        </van-tab>
      </van-tabs>
      <van-picker
        @confirm="confirmFn"
        @cancel="cancelFn"
        v-show="(isShow = show)"
        show-toolbar
        :columns="columns"
        toolbar-position="bottom"
        item-height="20px"
      />
    </van-sticky>
    <van-popup
      v-model="rightShow"
      position="right"
      :style="{ height: '100%', zIndex: '2666' }"
    >
      <Sildbar :filtCityList="filtCityList" @showProp="showProp" v-on="$listeners"></Sildbar>
    </van-popup>
    <van-popup v-model="show" />
  </div>
</template>

<script>
import { conditionApi } from '@/api'
import { Toast } from 'vant'
// 用于处理渲染地区列表
import { areaList } from '@/utiles/deepCopy.js'
import Sildbar from './sildbar.vue'
export default {
  async created () {
    Toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true
    })
    // 获取区域列表
    const res1 = await conditionApi({ id: 'AREA|dbf46d32-7e76-1196' })
    this.filtCityList = res1.data.body
    Toast.clear()
  },
  methods: {
    cilckFn () {
      this.isShow = false
    },
    // 取消按钮
    cancelFn () {
      this.isShow = false
      this.show = false
    },
    // 确认按钮
    async confirmFn (name) {
      console.log(name)
      this.$emit('selHouseFn', name)
      this.isShow = false
      this.show = false
    },
    onClick () {
      this.zIndex = 2055
      this.rightShow = false
      this.isShow = true
      this.show = true
      this.columns = []
      if (this.activeName === 'label') {
        const arr = []
        for (const key in this.filtCityList) {
          if (this.filtCityList[key].label) {
            arr.push(this.filtCityList[key])
          }
        }
        // 处理成渲染数据
        areaList(arr, this.columns)
      } else if (this.activeName === 'rentType') {
        for (let i = 0; i < this.filtCityList.rentType.length; i++) {
          const obj = {}
          obj.text = this.filtCityList.rentType[i].label
          this.columns.push(obj)
        }
      } else if (this.activeName === 'price') {
        for (let i = 0; i < this.filtCityList.price.length; i++) {
          const obj = {}
          obj.text = this.filtCityList.price[i].label
          this.columns.push(obj)
        }
      } else {
        this.show = false
        this.rightShow = true
        this.zIndex = 2000
      }
      console.log(this.columns)
    },
    showProp (val) {
      this.rightShow = val
    }
  },
  props: ['selArea', 'selHouseFn'],
  data () {
    return {
      columns: [],
      activeName: '',
      filtCityList: [],
      isShow: false,
      show: false,
      rightShow: false,
      zIndex: 2055
    }
  },
  components: { Sildbar }
}
</script>

<style lang="less" scoped>
/deep/.van-picker__cancel {
  color: #21b97a;
  display: inline-block;
  height: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  width: 125px;
}
/deep/.van-picker__confirm {
  color: #fff;
  background-color: #21b97a;
  display: inline-block;
  height: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  width: 100%;
}
.van-picker {
  z-index: 2055;
}

</style>
